<template>
    <div>
        <!--        标题&ndash;&gt;-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><i class="el-icon-s-goods"></i>添加商品</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        商品基本信息-->
        <div class="title_xiao">
            商品基本信息
        </div>
        <div class="biao">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple kuang" label-width="80px">
                        <el-form size="small"
                                 :model="formadd"
                                 label-width="80px">
                            <el-form-item label="商品名称">
                                <el-input v-model="formadd.name"
                                          placeholder="请输入商品名称，最多20字" maxlength="20"
                                          clearable
                                          show-word-limit
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="商品描述">
                                <el-input type="textarea"
                                          v-model="formadd.desc"
                                          :rows="5"
                                          maxlength="100"
                                          show-word-limit
                                          clearable
                                          placeholder="请输入内容"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light kuang">
                        <el-form :model="formadd"
                                 size="small"
                                 label-width="80px"
                        >
                            <el-form-item label="上架状态">
                                <el-select v-model="formadd.state" placeholder="请选择商品状态">
                                    <el-option label="出售" value="1"></el-option>
                                    <el-option label="促销" value="2"></el-option>
                                    <el-option label="售罄" value="3"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="数据归属">
                                <el-radio-group v-model="formadd.radio">
                                    <el-radio label="测试">测试</el-radio>
                                    <el-radio label="上架">上架</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>

                    </div>
                </el-col>
            </el-row>
        </div>
        <!--        商品图片信息-->
        <div class="title_xiao">
            商品图片信息
        </div>
        <div class="goods_img">
            <!--            首页图-->
            <div class="big_img">
                首页大图
                <upImg @postImg="bigImg" :limit="bigimg"  :width="220" :height="220"></upImg>

            </div>
            <!--            详情图-->
            <div class="Detals_big">
                详情图
                <upImg @postImg="detailImg" :limit="smallimg"></upImg>
            </div>
        </div>

        <!--        商品规格 销售 浏览表-->
        <div class="title_xiao">
            商品规格信息
        </div>
        <div>
            <el-table
                    size="mini"
                    :data="guiGeinfo"
                    border
                    style="width:100%"
                    :cell-style="cell_style"
                    :header-cell-style="{background:'#3899FF',color:'#ffffff',textAlign:'center'}"
            >
                <el-table-column prop="good_price" label="商品原价（元）">
                    <template slot-scope="scope">
                        <el-input v-model="formadd.good_price" placeholder="" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_discount_price" label="促销价（元）">
                    <template slot-scope="scope">
                        <el-input v-model="formadd.goods_discount_price" placeholder="" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_cost_price" label="商品成本价（元）">
                    <template slot-scope="scope">
                        <el-input v-model="formadd.goods_cost_price" placeholder="" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_buy_limit" label="快递费（元）">
                    <template slot-scope="scope">
                        <el-input v-model="formadd.goods_kuaidi" placeholder="" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_buy_limit" label="购买数量限制（个）">
                    <template slot-scope="scope">
                        <el-input v-model="formadd.goods_buy_limit" placeholder="" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_stock" label="库存">
                    <template slot-scope="scope">
                        <el-input v-model="formadd.goods_stock" placeholder="" size="mini"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="supplier_name" label="供货商">
                    <template slot-scope="scope">
                        <el-input v-model="formadd.supplier_name" placeholder="供货商" size="mini"
                                  class="shuru">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="supplier_phone" label="供货商联系方式">
                    <template slot-scope="scope">
                        <el-input v-model="formadd.supplier_phone" placeholder="供货商联系方式" size="mini"
                                  class="shuru"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div class="juzhong">
                <el-button type="primary" size="small" @click="submitAddGoods">提交</el-button>
                <el-button  size="small" @click="toGoodsList">商品列表</el-button>
            </div>

        </div>


    </div>

</template>

<script>
    import upImg from "./updateImg/upImg";
    import axios from "../../tool/http";
    import  api from "../../tool/api";


    export default {
        name: "addProduct",
        components: {
            upImg
        },
        data() {
            return {
                //大图张数限制
                bigimg: 1,
                //详情图张数限制
                smallimg: 9,
                //商品信息
                formadd: {
                    name: '',
                    state: '',
                    desc: "",
                    radio: "上架",
                    good_price: '',
                    goods_discount_price: "",
                    goods_cost_price: "",
                    goods_kuaidi: '',
                    goods_buy_limit: "",
                    goods_stock: "",
                    supplier_phone: "",
                    supplier_name: "",

                },
                //图片信息
                imgData: {
                    bigimg: [],
                    detailimg: []
                },
                guiGeinfo: [{
                    good_price: "",
                    goods_discount_price: "",
                    goods_cost_price: "",
                    goods_buy_limit: "",
                    goods_stock: "",
                    supplier_id: "",
                    goods_kuaidi: '',
                }]
            }
        },
        methods: {

            // //以下方法实现表格文字居中
            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },

            //回商品列表
            toGoodsList() {
                this.$router.push("/productlist");
            },
            //从上传图片组件那数据
            bigImg(val) {
                this.imgData.bigimg=val


            },
            detailImg(val) {
                this.imgData.detailimg=val
                // console.log(this.imgData.detailimg)
            },
            //提交添加
            submitAddGoods() {
                let adddata={jichu:this.formadd,tupian:this.imgData,guige:this.guiGeinfo}
                // console.log(adddata)

                this.$confirm('确认添加这个商品?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'info'
                }).then(() => {
                    axios({
                        url:api.addGoods,
                        data:adddata,
                        // method:"post"
                        method:"post"
                    }).then(res=>{
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '添加商品成功!'
                            });
                        } else if (res.data.code === 400) {
                            this.$message({
                                type: 'info',
                                message: '添加商品失败,请重试!'
                            });
                        }
                    })

                })
            },




        }
    }
</script>

<style lang="less" scoped>

    .title_xiao {
        border-bottom: 1px solid #3899FF;
        text-align: left;
        padding: 5px;
        color: #3899FF;
        font-size: 14px;
        margin-top: 10px;
    }

    .biao {
        padding: 20px 0 0 0;
    }

    .kuang {
        width: 70%;
        margin: 0 auto;
    }

    .goods_img {
        display: flex;
        text-align: center;

        .big_img {
            flex: 1;
            border: 5px solid white;
            padding: 10px;
            border-radius: 5px;

        }

        .Detals_big {
            flex: 4;
            border: 5px solid white;
            padding: 10px;
            border-radius: 5px;
            margin-left: 20px;

        }
    }

    .supply {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        .shuru {
            width: 48%
        }

    }
    .juzhong{
        width: 80%;
        height: 60px;
        line-height: 60px;
        margin: 0 auto;
        text-align: center;
    }


</style>
